import React, { Component } from 'react'

class Demo extends Component{
  state = {
    msg: '🐖'
  }
  // constructor(props) {
  //   super(props)
  // }
  static getDerivedStateFromProps(props, state){
    // console.log('Demo---getDerivedStateFromProps')
    // console.log(props, state)
    return {
      ...props
    }
  }
  render() {
    console.log('Demo---render-------')
    console.log('Demo:state', this.state)
    console.log('Demo:props', this.props)
    console.log('--------------------')
    return (
      <div>
      </div>
    )
  }
  componentDidMount() {
    // console.log('Demo---componentDidMount')
  }
}

export default class App extends Component {
  state = {}
  constructor(props){
    super(props)
    console.log('App---constructor')
  }
  static getDerivedStateFromProps(props, state){
    console.log('App---getDerivedStateFromProps')
    // console.log(props, state)
    return {
      msg: '🐎'
    }
  }
  render() {
    console.log('App---render')
    console.log('App:state', this.state)
    console.log('App: props', this.props)
    return (
      <div>
        <Demo msg1='🐂' msg2='🐏'></Demo>
      </div>
    )
  }
  componentDidMount() {
    console.log('App---componentDidMount')
  }
}
